<template>
  <div class="admin-detail-box">   
     <row title="姓名" >
        <input class="ipt" type="text" slot="rowRight" placeholder="请输入姓名" v-model="name">
    </row>
    <row title="账号">
        <input class="ipt" type="text" slot="rowRight" placeholder="请输入账号" v-model="userName">
    </row>
    <row title="登录密码">
        <input class="ipt" type="passWord" slot="rowRight" placeholder="请输入账号登录密码" v-model="password">
    </row>
    <row title="确认密码">
        <input class="ipt" type="passWord" slot="rowRight" placeholder="请确认账号登录密码" v-model="passwordComfirm">
    </row>
    <div class="manage-shop-list">
        <div class="manage-title isbtn"  @click="goChoose">
            <span>管理店铺</span> <div class="isclick"></div>
        </div>
        <div class="admin-shop-list" v-for="(item,index) in shopList" :key="index">
            <div class="shop-name">{{item.storeName}}</div>
            <div class="shop-adreess">{{item.province}}{{item.city}}{{item.district}}{{item.adreess}}</div>
        </div>
        
    </div>
    <div class="manage-shop-list">
        <div class="manage-title isbtn"  @click="chooseWareHouse()">
            <span>管理仓库</span> <div class="isclick"></div>
        </div>
        <div class="admin-shop-list" v-for="(item,index) in warehouseList" :key="index">
            <div class="shop-name">{{item.name}}</div>
            <div class="shop-adreess">{{item.province}}{{item.city}}{{item.district}}{{item.adreess}}</div>
        </div>
        
    </div>
    <div class="height120"></div>
    <div class="btn isbtn" @click="submit()">提交</div>
  </div>
</template>
<script>
import row from '@/components/row'
import { Message } from 'element-ui' 
import api from '@/api/api.js' 
import util from '@/utils/util.js'
export default { 
  components: {
      row
  },
  data () {
    return { 
        name:'',
        userName:'',
        password:'',
        passwordComfirm:'',
        shopList:[],
        warehouseList: this.$store.state.warehouseList
    }
  },
  mounted () { 
  },
  beforeRouteEnter(to, from, next) {
   next(vm=>{ 
      if(from.name=="AdminMng" ){
        vm.initPage();
      }

    })
  }, 
  activated(){
    this.shopList = this.$store.state.chooseShopList;
    this.warehouseList = this.$store.state.warehouseList;  
  },
  filters: {
     
  },
  methods: { 
    initPage(){
        this.name='';
        this.userName='';
        this.password='';
        this.passwordComfirm='';
        this.$store.commit("setShopList",[]);
        this.$store.commit("setWarehouseList",[]);
    },
    goChoose(){
        this.$router.push({path:'/chooseShop'})
    },
    chooseWareHouse(){
      this.$router.push({path:'/chooseWarehouse',query:{formType:3}});
    },
    submit(){
       if(!this.name){
          return  Message({
                message: "请输入姓名！",
                type: 'error',
                duration: 3 * 1000
            })
       }
       if(!this.userName){
          return  Message({
                message: "请输入账号！",
                type: 'error',
                duration: 3 * 1000
            })
       }
       if(!this.password){
          return  Message({
                message: "请输入密码！",
                type: 'error',
                duration: 3 * 1000
            })
       }
        if(!this.passwordComfirm){
          return  Message({
                message: "请确认密码！",
                type: 'error',
                duration: 3 * 1000
            })
       }
       if(this.passwordComfirm!==this.password){
          return  Message({
                message: "两次密码输入不一致！",
                type: 'error',
                duration: 3 * 1000
            })
       }
       if(this.shopList.length==0){
          return  Message({
                message: "请选择店铺！",
                type: 'error',
                duration: 3 * 1000
            })
       }
       
       const storeList=this.shopList.map(item=>{
           return item.storeId
       })
       const warehouseList=this.warehouseList.map(item=>{
           return item.id
       })
        api.adminMng.addAdmin({
            nickName:this.name,
            userName:this.userName,
            password:util.encrypt(this.passwordComfirm),
            storeList: storeList.join(","),
            warehouseList: warehouseList.join(",")
        },res=>{
            this.$router.go(-1);
            return  Message({
                message: "添加成功",
                type: 'success',
                duration: 1 * 1000
            })
        })
    }
  }
}
</script>
<style lang="less" scoped>
.manage-shop-list{
    padding: 20px;
}
.manage-title{
    position: relative;
    padding-bottom: .20rem;
    font-weight: bold;
    font-size: .30rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.admin-shop-list{
    padding-top: .20rem;
    padding-bottom: .20rem;
    border-bottom: 1px solid #f7f7f7;
}

.shop-adreess{
    color: #999;
    margin-top: .12rem;
    font-size: .22rem;
}
input {
    outline: none;
}
.ipt{
    border: none;
}

.height120{
    height: 60px;
}
.btn{
    text-align: center;
    line-height: 50px;
    background: #FABE00;
    color: #fff;
    height: 50px;
    font-size: 16px;
    letter-spacing: 4px;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
}
</style>